<template>
    <div class="remark_container">
        <HeaderTop :goBack="true" :headTitle="'订单备注'"></HeaderTop>
        <section class="quick_remark" v-if="remarkList">
            <header class="header_style">快速备注</header>
            <ul class="remark_arr_list_ul">
                <li class="remark_arr_list_li" v-for="(item,index) in remarkList.remarks" :key="index">
                    <span class="remark_item_li" 
                        v-for="(remarkTtem, remarkIndex) in item" :key="remarkIndex" 
                        :class="{choosed: marksArr[index].includes(remarkIndex)
                            }" 
                        @click="chooseRemark(index, remarkIndex)">
                        {{remarkTtem}}
                    </span>
                </li>
            </ul>
        </section> 
        <section class="quick_remark">
            <header class="header_style">其他备注</header>
            <textarea name="" v-model="inputMark" placeholder="请填写其他备注(可选)" id="" cols="30" rows="10"></textarea>
        </section> 
        <div class="determine" @click="confirmRemark">确定</div>
    </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import {getRemark} from '@api/getData';
export default {
    data(){
        return {
            remarkList: null,
            showLoading: true,
            marksArr:[],
            inputMark:''
        }
    },
    computed:{
        ...mapState(['cart_id','sig'])
    },
    created(){
        
    },
    mounted(){
        this.initData();
    },
    methods:{
        ...mapActions(['submitRemark']),
        async initData(){
            this.remarkList = await getRemark(this.cart_id, this.sig);
            let arrlenght = this.remarkList.remarks.length;
            for(let i=0;i<arrlenght;i++){
                this.marksArr.push([])
            }
            this.showLoading = false;
        },
        remarkText(){

        },
        chooseRemark(index,remarkIndex){
            let arr = [...this.marksArr]
            let indxArr = arr[index];
            let i = indxArr.length;
            let has = indxArr.includes(remarkIndex)
            if(has){
                indxArr.splice(0,1);
            }else if(i>0){
                indxArr.splice(0,i);
                indxArr.push(remarkIndex)
            }else{
                indxArr.push(remarkIndex);
            }
            this.marksArr=arr;
        },
        confirmRemark(){
            let remarks='';
            let list = this.remarkList.remarks;
            this.marksArr.forEach((itemArr,index)=>{
                if(itemArr.length>0){
                    if(remarks.length>0){
                        remarks += ',' +list[index][itemArr[0]]
                    }else{
                        remarks += list[index][itemArr[0]]
                    }
                    
                }
            })
            if(this.inputMark.length>0){
                remarks += ',' +this.inputMark
            }
            this.submitRemark(remarks);
            this.$router.go(-1);
        }
    }

}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.remark_container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 1.95rem;
    background-color: #f2f2f2;
    z-index: 30;
    .quick_remark{
        margin-top: 0.5rem;
        padding: 0 0.5rem;
        background-color: #fff;
        .header_style{
            height: 2rem;
            line-height: 2rem;
            @include sc(0.6rem,#666);
        }
        .remark_arr_list_ul{
            display: flex;
            flex-wrap: wrap;
            .remark_arr_list_li{
                font-size: 0;
                display: flex;
                align-items: center;
                margin-right: 0.5rem;
                margin-bottom: 0.5rem;
                span{
                    flex: 1;
                    @include sc(0.6rem,#333);
                    padding: 0.25rem 0.5rem;
                    border-top: 0.05rem solid $blue;
                    border-bottom: 0.05rem solid $blue;
                    border-right: 0.05rem solid $blue;
                    &.choosed{
                        background-color: $blue;
                        color: #fff;
                    }
                    
                }
                span:nth-of-type(1){
                    border-left: 0.05rem solid $blue;
                    border-top-left-radius: 0.3rem;
                    border-bottom-left-radius: 0.3rem;
                }
                span:nth-last-child(1){
                    border-right: 0.05rem solid $blue;
                    border-top-right-radius: 0.3rem;
                    border-bottom-right-radius: 0.3rem;
                }
            }
        }
        textarea{
            background-color: #f3f3f3;
            padding: 0.5rem 0.2rem;
            margin-bottom: 0.5rem;
            resize:none;
            width: 100%;
            height: 4rem;
        }
    }
    .determine{
        margin: 0 0.5rem;
        border-radius: 0.2rem;
        @include sc(0.7rem,#fff);
        background-color: $green;
        padding: 0.4rem 0;
        text-align: center;
    }
}
</style>